<template>
  	<div class="home">
		<div class="home_top">
			<van-sticky @scroll="scroll">
				<HomeTop :class="{bg:state}"></HomeTop>
			</van-sticky>
			<div class="swiper">
				<SwiperView></SwiperView>
				<SwiperIconView></SwiperIconView>
			</div>
		</div>
		<div class="banner_s">
			<img :src="img" alt="">
		</div>
		<div class="Icon">
			<IconView :list="list"></IconView>
		</div>
		<div class="green_icon">
			<GreenIcon></GreenIcon>
		</div>
		<!-- 限时抢购 -->
		<div class="fast">
			<FastView :countDown="countDown" :LiuFlashSaleData="LiuFlashSaleData"></FastView>
		</div>
		<!-- 特色专区
		<div class="TeSe">
			<TraitView></TraitView>
		</div> -->

		<!-- 首页tab切换list页 -->
		<div class="tab_list">
			<TabListView></TabListView>
		</div>
		<div class="box"></div>
  	</div>
</template>

<script>
import SwiperView from '@/components/SwiperView.vue';
import SwiperIconView from '@/components/SwiperIconView.vue';
import IconView from '../components/IconView.vue';
import GreenIcon from '@/components/GreenIcon.vue';
import HomeTop from '@/components/HomeTop.vue';
import FastView from '@/components/FastView.vue';
import TraitView from '../components/TraitView.vue';
import TabListView from '@/components/TabListView.vue';

export default {
	name: 'HomeView',
	components: { SwiperView, SwiperIconView, IconView, GreenIcon, HomeTop, FastView, TraitView, TabListView },
	data(){
		return{
			img:[],
			list:[],
			countDown:[],
			array:[],
			LiuFlashSaleData:[],
			state:false
		}
	},
    async created(){
        let res = await this.$http.getHomeApi();
        this.img = res.data.data.home_ad.image_url
        // console.log(this.img)
		this.list = res.data.data.list[2].icon_list
        // console.log(this.list)
		this.countDown = res.data.data.list[3].product_list;
		// console.log(this.countDown);
		this.LiuFlashSaleData = res.data.data.list[3]
		// this.array = res.data.data.special_zone;
		// console.log(this.array)
		// this.tabList = res.data.data.list[12].product_list;
		// console.log(this.tabList)
    },
	methods:{
		scroll(state){
			if(state.scrollTop>100){
				this.state=true;
			}else{
				this.state=false;
			}
		}
	}
}
</script>
<style scoped lang="less">
.bg{
    background: white;
}
*{
	padding: 0;
	margin: 0;
}
.home_top{
	box-sizing: border-box;
	width: 100vw;
	height: 40vh;
	background: url("../assets/img/home/backImage.png") no-repeat;
}
.banner_s{
	width: 100vw;
	height: 16vh;
	img{
		width: 100%;
		height: 100%;
	}
}
.Icon{
	box-sizing: border-box;
	margin-top: 1rem;
}
.green_icon{
	box-sizing: border-box;
	margin: 0 auto;
}
.fast{
	box-sizing: border-box;
	padding-top: .6rem;
}
.TeSe{
	width: 100vw;
	box-sizing: border-box;
	padding-top: .6rem;
}
.box{
    height: 4rem;
}
.tab_list{
	background: #f7f7f7;
}

</style>